<html>
    <head>
        <meta charset="utf-8">
        <title>天地图图层</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1. 添加ChineseTmsProvider插件的引用-->
        <script type="text/javascript" src="../lib/plugins/leaflet.ChineseTmsProvider.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                //2.创建map对象，设置当前显示level为5
                map = L.map("mapDiv", { 
                    center: [39.90,116.39],
                    zoom: 5,
                });

                //3. 创建天地图图层，并添加到map上
                var normalm = L.tileLayer.chinaProvider(
                                    'TianDiTu.Satellite.Map',{     //1)定义天地图的图层
                                        maxZoom: 18,               //2)定义天地图的最大最小显示层级
                                        minZoom: 5
                                 }).addTo(map);
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



